
import { initState } from './initState'
import { compileToFunction } from './compile/index'
import { callHook, lifeCycleMixin, mounetComponent } from './lifecycle.js';
import { mergeOptions } from './utils/index.js';
export function initMixin(Vue) {
  Vue.prototype._init = function (options) {
    // console.log(options);
    let vm = this;
    vm.$options = mergeOptions(Vue.options, options); //合并全局的options和实例的options
    console.log('vm.$options', vm.$options);

    callHook(vm, 'beforeCreate')
    //初始化状态
    initState(vm)
    callHook(vm, 'created')

    //渲染模板 el，判断是否有挂载点
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }

  //创建 $mount
  Vue.prototype.$mount = function (el) {
    console.log('我是--------el', el);
    //render template  el 
    let vm = this
    el = document.querySelector(el)
    vm.$el = el; //$el是旧的do m
    let options = vm.$options
    if (!options.render) {
      let template = options.template
      if (!template && el) {


        //获取html
        el = el.outerHTML
        console.log('我是---------el.outerHTML', el);//<div id="app">hello {{msg}}</div>


        //变成ast语法树  -》 ast变成 render()函数
        let render = compileToFunction(el)
        // console.log(render);


        //将render函数变成虚拟domvnode，再将变成真是dom放到页面
        options.render = render //将render函数挂载到实例上面去
        //虚拟dom
      }
    }
    //挂载组件
    mounetComponent(vm, el)
  }
}
//ast语法树 {} https://juejin.cn/post/7076002091570823181   vnode {}
